<template>
    <div>
        <div class="body" >
          <!--头部-->
          <el-steps space="500px" id="steps" :active="step">
            <el-step title="用户名" icon="el-icon-search"></el-step>
            <el-step title="验证码" icon="el-icon-message"></el-step>
            <el-step title="修改中" icon="el-icon-setting"></el-step>
          </el-steps>
          <!--底栏信息-->
          <!--<router-view></router-view>-->
          <div class="body-1">
            <!--表单1-->
            <el-form  v-if="step===1" :model="ruleForm"  ref="ruleForm" id="from" label-width="80px">
              <el-form-item label="用户名"  prop="name" >
                <el-input placeholder="请输入用户名/手机/邮箱" v-model="ruleForm.name"  clearable></el-input>
                <el-button id="submit" @click="next(ruleForm.name)" type="primary">下一步</el-button>
              </el-form-item>
            </el-form>
            <!--表单2-->
            <el-form v-if="step===2" :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item v-if="!ruleForm.switch" label="已验证手机" prop="name">
                <el-input v-model="ruleForm.phone_encryption" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item v-if="ruleForm.switch" label="已验证邮箱" prop="name">
                <el-input v-model="ruleForm.email" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item  label="验证码" prop="name">
                <el-col :span="11">
                  <el-input  placeholder="验证码" v-model="ruleForm.code" clearable ></el-input>
                </el-col>
                <el-col :span="11">
                  <el-button id="code" @click="getCode()" :type="button_status" :disabled="button_status=='danger'">获取</el-button>
                </el-col>
              </el-form-item>
              <el-form-item label="选择验证方式" prop="name">
                <el-switch
                  v-model="ruleForm.switch"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="邮箱"
                  inactive-text="手机">
                </el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" id="submit2" @click="auth()">下一步</el-button>
              </el-form-item>
            </el-form>
            <!--表单3-->
            <el-form  v-if="step===3" :model="ruleForm"  ref="ruleForm" id="from" label-width="80px">
              <el-form-item label="新密码"  prop="name" >
                <el-input placeholder="请输入新密码" v-model="ruleForm.password"  clearable></el-input>
              </el-form-item>
              <el-form-item label="确认密码"  prop="name" >
                <el-input placeholder="请输入确认密码" v-model="ruleForm.passwordAgain"  clearable></el-input>
              </el-form-item>
              <el-form-item  >
                <el-button id="submit" @click="success()" type="primary">完成</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

    </div>


</template>

<style scoped>
  .body{
    height: 400px;
    width: 1300px;
    margin: 12% auto;
  }
  .body-1{
    width: 300px;
    height: 300px;
    text-align: center;
    margin-left: 36%;
    margin-top: 80px;
  }
  #from{
    margin-top: 20px;
    line-height: 30px;
  }
  #submit{
    margin-top: 30px;
    float: left;
    margin-left: 50px;

  }
  #steps{
    margin-left: 22%;
  }
  #code{
    margin-left: 10px;
  }
  #submit2{
    float: left;
    margin-left: 25px;
  }


</style>

<script>
  import axios from 'axios';
  export default {
    data(){
      return{
        ruleForm:{
          name:'',
          email:'',
          phone_encryption:'',
          phone:'',
          id:'',
          code:'',
          password:'',
          passwordAgain:'',
          switch:false,
        },
        step:1,
        button_status:'success',

      }
    },
    methods:{
      //修改密码
      success(){
       if(this.ruleForm.password.trim().length==0){
          this.open_error('密码不能为空！')
        }else if (this.ruleForm.passwordAgain.trim().length==0 ||
         this.ruleForm.passwordAgain!=this.ruleForm.password){
         this.open_error('两次密码不一致');
       }else{
          //修改数据
         let url='https://www.dragonjun.com/jersey/api/user/update_password';
         let data=JSON.stringify({"id":this.ruleForm.id,"password":this.ruleForm.password});
         axios.post(url,data,{
           headers: {
             'Content-Type': 'application/json',
           }
         }).then((data)=>{
           console.log(data);
           if(data.data.code==0){
             //成功
             this.$router.push('/');
             this.open_success('密码重置成功');
           }else{
             this.open_error(data.data.desc)
           }
         }).catch((error)=>{
           console.log('错误',error)
         })
       }
      },
      //验证
      auth(){
        if(this.ruleForm.code.trim().length===0){
          this.open_error('验证码不能为空!');
        }else{
          let param;
          if(this.ruleForm.switch){
            param=this.ruleForm.email;
          } else {
            param=this.ruleForm.phone;
          }
          //验证码验证
          let data=JSON.stringify({"code":this.ruleForm.code,"type":2,"param":param});
          let url='https://www.dragonjun.com/jersey/api/user/auth_code';
          axios.post(url,data,{
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((data)=>{
            //console.log(data);
            if(data.data.code===0){
              //成功
              this.step++;
            } else{
              //失败
              this.open_error(data.data.desc)
            }
          }).catch((error)=>{
            console.log('错误',error)
          });

        }

      },
      //定义弹窗（成功）
      open_success(msg) {
        this.$message({
          message: msg,
          type: 'success'
        });
      },
      //错误
      open_error(msg) {
        this.$message.error(msg);
      },
      next(name){
        if(this.ruleForm.name.trim().length==0){
          this.open_error('用户名不能为空！');
        }else{
          //获取用户的值
          let data=JSON.stringify({"username":this.ruleForm.name});
          let url='https://www.dragonjun.com/jersey/api/user/get_user_by_name';
          axios.post(url ,data,{
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((data)=>{
            console.log(data);
            if(data.data.code==0){
              //开始赋值
              this.ruleForm.name=data.data.data.username;
              this.ruleForm.email=data.data.data.email;
              this.ruleForm.phone_encryption=data.data.data.phone.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 **** $3');
              this.ruleForm.id=data.data.data.id;
              this.ruleForm.phone=data.data.data.phone;
              this.step++;
            }else{
              this.open_error(data.data.desc)
            }
          }).catch((error)=>{
            console.log('error',error);
          });

          //this.step++;
        }

      },
      //发送验证码
      getCode(){
        //自定义格式
          //发送短信
          let phone_or_email;
          if (!this.ruleForm.switch){
            phone_or_email=this.ruleForm.phone;
          }else{
            phone_or_email=this.ruleForm.email;
          }
          let data=JSON.stringify({"phone_or_email":phone_or_email,"type":2});
          let url='https://www.dragonjun.com/jersey/api/user/send_sms_email';
          axios.post(url,data,{
            headers: {
              'Content-Type': 'application/json',
            }
          }).then( (data)=> {
            //console.log(data);
            let result=data.data;
            //console.log(result)
            if(result.code===0){
              this.open_success('验证码发送成功！');
            }else{
              //登录失败！
              this.open_error(result.desc);
            }
          }).catch( (error)=> {
            console.log('错误'+error);
          });
          let count=120;
          //改变按钮的状态
          let codeButton=document.getElementById('code');
          //let codeButton=this.$refs.code;
          this.button_status='danger';
          //codeButton.type='danger';
          codeButton.innerHTML=count+'后重试';
          let status= this.button_status;
          //倒计时
          let timer=window.setInterval(()=> {
            //执行定时任务
            if(count===0){
              //停止计时器
              //console.log(status);
              this.button_status='success';
              //console.log(this.button_status);
              codeButton.removeAttribute('disabled');
              codeButton.innerHTML='重试';
              window.clearInterval(timer);
            }else{
              count--;
              codeButton.innerHTML=count+'后重试';
            }
          },1000);
        }
      },

  }
</script>
